<template>
  <div class="musicScorelist">
    <div class="musicScore-content">
      <div class="musicScore">
        <div class="cover-content">
          <div class="musicScore-contains">
            <el-link
              :underline="false"
              type="info"
              @click="GoDetail"
              class="title"
              >{{ musicScore.music_score_title }}</el-link
            >
          </div>
          <div class="creator">发布者: {{ musicScore.creator_name }}</div>
        </div>

        <div class="meta">
          <div class="options">
            <a
              :underline="false"
              type="info"
              @click="openCommentList"
              class="icon"
            >
              {{ musicScore.like_count }} 喜欢</a
            >
            <a :underline="false" type="info" class="icon">
              {{ musicScore.comment_count }} 评论</a
            >
            <a href="#" type="info" class="icon share" @click="shareMusicScore">
              分享</a
            >
          </div>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <CommentList
        v-if="isCommentOpen"
        :commentList="commentList"
        :page="page"
        :musicScore="musicScore"
        :count="count"
      />
    </el-collapse-transition>
  </div>
</template>

<script>
import CommentList from '../Comment/CommentList'
import getCommentList from '@/mock/comment'
import defaultImg from '@/assets/img/defaultImg.jpg'
import SvgIcon from '@/components/Tools/SVGIcon.vue'
import { copyToClipboard } from '@/utils/tools'
export default {
  name: 'MusicScoreCard',

  data() {
    return {
      limit: 3,
      page: 1,
      isCommentOpen: false,
      commentList: [],
      count: 0,
      isReload: false,
      defaultImg: defaultImg
    }
  },
  computed: {
    formattedArticleAbstract() {
      return this.$options.filters.removeBrTags(
        this.musicScore.music_score_abstract
      )
    }
  },
  filters: {
    removeBrTags(value) {
      return value.replace(/<br>/g, '')
    }
  },
  props: {
    musicScore: {
      type: Object,
      required: true
    }
  },
  methods: {
    async openCommentList() {
      // 如果已经打开了直接关闭
      if (this.isCommentOpen) return (this.isCommentOpen = false)
      const { musicScore, limit, page } = this
      // 获取评论列表
      this.$store.dispatch('musicScore/getCurrentCommentList', {
        musicScore,
        limit,
        page
      })
      const res = await this.$API.musicScore.getCommentList(
        musicScore.id,
        limit,
        page
      )
      console.log('res', res)
      if (res.status == 200) {
        this.count = res.data.count
        this.commentList = res.data.payload
      }
      this.isCommentOpen = !this.isCommentOpen
    },
    // 重载评论列表
    ReloadCommentList() {
      this.isReload = true
      this.openCommentList()
      this.isReload = false
    },
    // 发送跳转详情页事件
    GoDetail() {
      console.log('GoDetail')
      this.$router.push({
        name: 'MusicScoreDetail',
        params: { id: this.musicScore.id, isEdit: true }
      })
    },
    // 分享链接
    shareMusicScore() {
      const currentUrl =
        window.location.origin + '/musicScoreDetail/' + this.musicScore.id
      copyToClipboard(currentUrl) // 调用复制链接到剪贴板的方法
      alert('当前页面链接已复制到剪贴板')
    }
  },
  components: {
    CommentList,
    SvgIcon
  },
  mounted() {},
  beforeDestroy() {}
}
</script>

<style scoped>
.musicScorelist {
  display: flex;
  flex-wrap: wrap;
  /* padding: 8px; */
  line-height: 150%;
  border-radius: 10px;
}
.musicScore-content {
  width: 100%;
  display: flex;
  /* margin-right: 20px; */
}
.musicScore {
  width: 100%;
  padding: 20px;
}
.musicScore .title {
  display: flex;
  font-size: 16px;
  justify-content: flex-start;
  color: #121212;
}
.more {
  color: #969696;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta {
  /* margin-bottom: 10px; */
  /* display: flex; */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.options {
  float: left;
  color: #b4b4b4;
  font-size: 16px;
}
.author {
  margin-right: 10px;
  color: #b4b4c5;
}
.author:hover {
  color: #9f7878;
}

.musicScore-contains {
  width: 100%;
  line-height: 1.8em;
}

.summary {
  color: #1c1f23;
  font-size: 14px;
}
.icon {
  color: #b4b4b4;
  margin-right: 5px;
  font-size: 14px;
}
.cover-content {
  display: flex;
  flex-wrap: wrap;
}
.cover-content .creator {
  font-size: 14px;
  color: #91949a;
}
.share:hover {
  color: #91949a;
}
/* 移动端样式 */
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .musicScore-content {
    width: 90%;
    display: flex;

    flex-wrap: wrap;
    flex-direction: column;

    /* margin-right: 20px; */
  }
  .musicScore {
    width: 100%;
  }
  /* .summary {
    color: #1c1f23;
    font-size: 14px;
    margin-left: 20px;
    width: 40%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    height: 100%;
    line-height: 1.67em;
  } */
  /* 其他移动端样式设置 */
}
</style>
